(function () {
  axios.defaults.baseURL = 'http://124.223.14.236:3001/api'
  let pageNum = 1; // 页码数
  let isFinished = false; // 是否结束了，没有更多数据了，不需要滚动了
  let isLoading = false;

  // =========================>发生请求
  async function getAjaxList() {
    isLoading = true
    document.querySelector('.list-box').innerHTML +=
      '<p class="more" id="loading">数据正在加载中...</p>';
    const { data: { data: res } } = await axios.get('/recipe', {
      params: {
        pageSize: 12,
        pageNum,
      }
    })
    console.log(res)
    const list = res.list
    if (list.length === 0) {
      isFinished = true
      document.querySelector('.list-box').innerHTML += '<p class="noinfo" >没有数据了...</p>'
    } else {
      pageNum++
      renderMenuList(list)
    }
    isLoading = false;
    const loadingDOM = document.getElementById('loading')
    loadingDOM.parentNode.removeChild(loadingDOM)
  }
  getAjaxList()

  // =========================>渲染列表
  function renderMenuList(menuList) {
    const listStr = menuList.map((item, index) => {
      // console.log(item)
      const { img, name, id } = item
      const reImg = 'http://124.223.14.236:3001/public/' + img
      return `
          <li>
            <a href="./info.html?id=${id}">
              <img src=${reImg} alt="" />
              <h3 title="${name}">${name}</h3>
            </a>
          </li>
        `
    }).join('')
    document.querySelector('.list-box ul').innerHTML += listStr
  }

  //=========================>下拉加载
  window.addEventListener('scroll', function () {
    if (isLoading) return; // 数据正在加载中，跳出
    if (isFinished) return; // 数据没有了，跳出

    const reachBottom =
      window.scrollY + window.innerHeight >=
      document.documentElement.offsetHeight - 10
    if (!reachBottom) return; // 没有滚动到底
    // 滚动到底了，要请求更多数据了
    getAjaxList()
  })
})()